<template>
  <div class="sandboxdetection-container">
    <div class="app-container">
      <el-card>
        <el-container>
          <el-aside width="150px">
            <div style="height: 500px">
              <steps ref="steps" @jump="jump" />
            </div>
          </el-aside>
          <el-main>
            <div class="sandboxdetection-content">
              <div ref="header" class="header">
                <div class="header-left">
                  <div class="title">
                    <i class="iconfont icon-wufengxian" />
                    经沙箱检测该文件为安全
                  </div>
                  <base-info :base-info-list="baseInfoList" />
                </div>
                <div class="header-right">
                  <div class="pdf"><i class="iconfont icon-PDFtubiao" /></div>
                  <div class="score">
                    0分<i class="iconfont icon-icon-question" />
                  </div>
                  <div class="btns">
                    <el-button size="mini">重新分析</el-button>
                    <el-button size="mini">报告</el-button>
                  </div>
                </div>
              </div>
              <!-- 多引擎检出率 -->
              <sandbox-title ref="multi" list-title="多引擎检出率" />
              <el-table
                style="width: 100%"
                :data="multiEngineList"
                stripe
                :row-style="{ height: '34px' }"
                :cell-style="{ padding: '0px' }"
                :header-cell-style="{
                  borderBottom: '2px solid #CDCDCD',
                  borderTop: '1px solid #E8EAEC',
                  color: '#222222',
                  fontWeight: 'bold',
                }"
              >
                <el-table-column prop="create_time" label="反病毒引擎" />
                <el-table-column
                  prop="user_name"
                  label="检测结果（最近检测时间：2021-12-20 06:16:19）"
                />
              </el-table>
              <div class="multi-open">
                <div v-if="!isOpen" class="open-all" @click="openAll">
                  <i class="iconfont icon-zhankaiquanbu" />展开全部
                </div>
                <div v-if="isOpen" class="open-all" @click="closeAll">
                  <i class="iconfont icon-zhankaiquanbu" />收起全部
                </div>
              </div>
              <!-- 威胁情报IOC -->
              <sandbox-title ref="threaten" list-title="威胁情报IOC" />
              <el-table
                style="width: 100%"
                :data="informationList"
                empty-text="未检测到情报IOC"
                stripe
                :row-style="{ height: '34px' }"
                :cell-style="{ padding: '0px' }"
                :header-cell-style="{
                  borderBottom: '2px solid #CDCDCD',
                  borderTop: '1px solid #E8EAEC',
                  color: '#222222',
                  fontWeight: 'bold',
                }"
              >
                <el-table-column prop="create_time" label="情报IOC" />
                <el-table-column prop="user_name" label="IOC类型" />
                <el-table-column prop="create_time" label="威胁类型" />
                <el-table-column prop="user_name" label="严重程度" />
              </el-table>
              <!-- 行为签名 -->
              <sandbox-title ref="action" list-title="行为签名" />
              <div class="behavior-signature">未检测到行为特征</div>
              <!-- 情报判定系统 -->
              <sandbox-title ref="info" list-title="情报判定系统" />
              <info-dec-system />
              <!-- 基本信息 -->
              <sandbox-title ref="base" list-title="基本信息" />
              <base-info :base-info-list="baseInfoList" />
              <!-- 静态信息 -->
              <sandbox-title ref="static" list-title="静态信息" />
              <div class="static-info">
                <div class="static-item">
                  <div
                    :class="[
                      isShowDetail ? 'static-title-open' : 'static-title-close',
                    ]"
                    @click="isShowDetail = !isShowDetail"
                  >
                    <i
                      :class="[
                        isShowDetail
                          ? 'iconfont icon-zhankai'
                          : 'iconfont icon-HTSCIT_zhankai',
                      ]"
                    />
                    <span>PDF基本信息</span>
                  </div>
                  <div v-if="isShowDetail" class="static-content">
                    <base-info :base-info-list="staticItemList" />
                  </div>
                </div>
              </div>
              <div class="test" />
            </div>
          </el-main>
        </el-container>
      </el-card>
    </div>
  </div>
</template>
<script>
import sandboxTitle from "./components/sandboxTitle.vue";
import baseInfo from "./components/baseInfo.vue";
import infoDecSystem from "./components/infoDecSystem.vue";
import steps from "./components/steps.vue";
export default {
  components: {
    sandboxTitle,
    baseInfo,
    infoDecSystem,
    steps,
  },
  data() {
    return {
      multiEngineList: [
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
      ],
      informationList: [],
      baseInfoList: [
        {
          id: 1,
          title: "样本名称",
          content:
            "ahafhdancoand4cafahjnf5afhniajhfkda9fnanf4jfkajf88afakflkfa44afklkf1",
        },
        { id: 2, title: "样本类型", content: "PDF document，version 1.7" },
        { id: 3, title: "样本类型", content: "85668" },
        {
          id: 4,
          title: "MD5",
          content: "51dhjabuiaenbfdakcvjd5ahjfdkhnf66adfjafnkja477",
        },
        {
          id: 5,
          title: "MD5",
          content: "51dhjabuiaenbfdakcvjd5ahjfdkhnf66adfjafnkja477",
        },
      ],
      isShowDetail: false,
      staticItemList: [
        {
          id: 1,
          title: "文件名",
          content:
            "ahafhdancoand4cafahjnf5afhniajhfkda9fnanf4jfkajf88afakflkfa44afklkf1",
        },
        { id: 2, title: "FileSize", content: "84KiB" },
        { id: 3, title: "文件类型", content: "pdf" },
        { id: 4, title: "文件扩展名", content: "pdf" },
      ],
      isOpen: false,
      scroll: "",
      topArr: [],
    };
  },
  watch: {
    // 监听scroll变量，只要滚动条位置变化就会执行方法loadScroll
    scroll: function () {
      this.loadScroll();
      console.log("监听到页面滚动");
    },
  },
  created() {
    this.$store.dispatch("app/toggleLoading", false);
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.getScroll);
  },
  methods: {
    openAll() {
      this.isOpen = !this.isOpen;
      const arr = [
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
      ];
      this.multiEngineList = [...arr];
    },
    closeAll() {
      this.isOpen = !this.isOpen;
      const newArr = [
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
        { create_time: "Trustlook", user_name: "非恶意" },
      ];
      this.multiEngineList = [...newArr];
    },
    getScroll() {
      this.scroll =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
    },
    jump(index) {
      //  Chrome
      document.body.scrollTop = this.topArr[index];
      // Firefox
      document.documentElement.scrollTop = this.topArr[index];
      // Safari
      window.pageYOffset = this.topArr[index];
    },
    loadScroll() {
      this.multiTop = this.$refs.multi.$el.offsetTop - 90;
      this.topArr.push(this.multiTop);
      this.threatenTop = this.$refs.threaten.$el.offsetTop - 90;
      this.topArr.push(this.threatenTop);
      this.actionTop = this.$refs.action.$el.offsetTop - 90;
      this.topArr.push(this.actionTop);
      this.infoTop = this.$refs.info.$el.offsetTop - 90;
      this.topArr.push(this.infoTop);
      this.baseTop = this.$refs.base.$el.offsetTop - 90;
      this.topArr.push(this.baseTop);
      this.staticTop = this.$refs.static.$el.offsetTop - 90;
      this.topArr.push(this.staticTop);
      this.topArr = [...new Set(this.topArr)];
      var self = this;
      for (var i = this.topArr.length - 1; i >= 0; i--) {
        if (self.scroll >= this.topArr[i]) {
          console.log(i);
          this.activeIndex = i;
          this.$refs.steps.list.map((item) => {
            item.active = false;
          });
          this.$refs.steps.list[i].active = true;
          break;
        }
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.sandboxdetection-container {
  // position: relative;
  .app-container {
    // position: relative;
    .el-aside {
      position: fixed;
      overflow: hidden;
      height: 600px;
      z-index: 999;
    }
  }
}
.el-main {
  padding: 0;
  padding-left: 160px;
}
aside {
  padding: 0;
  background-color: #fff;
}
.sandboxdetection-content {
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px 0 23px;
    height: 264px;
    background: #f7f7f7;
    border: 1px solid #e8eaec;
    .header-left {
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .title {
        padding-left: 12px;
        font-size: 20px;
        font-weight: bold;
        color: #00965f;
        i {
          font-size: 22px;
          padding-right: 3px;
        }
      }
    }
    .header-right {
      height: 190px;
      display: flex;
      flex-direction: column;
      align-items: end;
      justify-content: space-between;
      .pdf {
        width: 80px;
        height: 80px;
        i {
          font-size: 80px;
          color: #00965f;
        }
      }
      .score {
        margin-right: 8px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #00965f;
        i {
          margin-left: 3px;
        }
      }
    }
  }
  .multi-open {
    .open-all {
      width: 100px;
      margin: 10px auto 0;
      font-size: 13px;
      color: #00965f;
      cursor: pointer;
      i {
        padding-right: 10px;
      }
    }
  }
  .behavior-signature {
    line-height: 60px;
    border-top: 1px solid #e8eaec;
    border-bottom: 1px solid #e8eaec;
    text-align: center;
    font-size: 14px;
    color: #909399;
  }
  .static-info {
    .static-item {
      .static-title-open {
        padding: 0 12px;
        line-height: 36px;
        font-size: 14px;
        font-weight: bold;
        color: #222222;
        cursor: pointer;
        i {
          font-weight: 700;
          padding-right: 5px;
        }
      }
      .static-title-close {
        padding: 0 12px;
        line-height: 36px;
        font-size: 14px;
        font-weight: bold;
        color: #909399;
        cursor: pointer;
        i {
          font-weight: 700;
          padding-right: 5px;
        }
      }
    }
  }
  .test {
    height: 1000px;
  }
}
</style>
